<section id="about">
    <div class="hero is-primary is-medium">
        <!-- Hero content: will be in the middle -->
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title">
                    一个简单的静态博客
                </h1>
                <h2 class="subtitle">
                    用模块化的方式 尽可能少的工具来完成。 摆脱各种工具链的束缚，体会返璞归真的博客需要的是什么..
                </h2>
            </div>
        </div>

        <!-- Hero footer: will stick at the bottom -->
        <div class="hero-foot">
            <div class="tabs is-centered">
                <ul>
                    <li class="is-active"><a>总览</a></li>
                    <li><a>HTML</a></li>
                    <li><a>JAVASCRIPT</a></li>
                    <li><a>CSS</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="overview" class="container content notification">
        <!--tab-总览-->
        <div id="about-overview" class="my-content">
            <h2>总览</h2>
            <p>这个简单的博客使用<code>sea.js</code>来实现模块化的开发，文件进行了功能上的拆分,然后按照依赖分别引入。 整个项目的结构划分清晰，尽量使用少的工具库来实现需要的功能。

            </p>
            <p>这是一个没有后端的博客，文章使用MD格式保存在archives文件夹下，通过seajs-text以读取文本的方式加载， 然后交给
                <code>marked.js</code>完成MD-&gt;HTML的转换，通过<code>vue.js</code>动态操作节点实现文章展示和切换。

            </p>
            <pre><code>│  index.html         首页
├─ archives           .md文章
├─ images             静态图片
│
├─ css                样式文件夹
│      bulma.css      bulma 第三方css框架
│      bulma.css.map  bulma map文件
│      main.css       自定义样式
│
└─ js
    ├─ app.js         vue根组件
    │
    ├─component        vue组件
    │  ├─about.js
    │  ├─archives.js
    │  ├─article.js
    │  ├─header-area.js
    │  ├─content-area.js
    │  └─welcome.js         
    │
    ├─lib             第三方js库
    │  ├─sea.js
    │  ├─sea-text.js
    │  ├─vue.js        
    │  └─marked.js      渲染md文件
    │
    └─service             公共服务模块
       ├─article-manager.js 负责获取文章
       └─event-bus.js   事件总线</code></pre>
        </div>

        <!--tab-html-->
        <div class="my-content">
            HTML
        </div>
        <!--tab-JS-->
        <div class="my-content">
            JS
        </div>
        <!--tab-html-->
        <div class="my-content">
            CSS
        </div>
    </div>
</section>